
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Cloudwalk</title>

    <link rel="stylesheet" type="text/css" href="../../inc/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../inc/css/bootstrap-responsive.css" />
    <script type="text/javascript" src="../../inc/js/bootstrap.js"></script>
		
  	<script type="text/javascript" src="../../inc/js/jquery.js"></script>
	<script type="text/javascript" src="../../inc/js/bootstrap-carousel.js"></script>
	<script type="text/javascript" src="../../inc/js/bootstrap-transition.js"></script>
	<script type="text/javascript" src="../../inc/js/bootstrap-dropdown.js"></script>
	<script type="text/javascript" src="../../inc/js/bootstrap-collapse.js"></script>

    
      <script type='text/javascript' src="../../inc/js/less-1.3.0.min.js"></script>
   
	
    
  
    
    
  
  <style type='text/css'>
	@font-face
	{
		font-family: Casper;
		src: url('../../inc/font/Casper.ttf');	  
	}
	
	@font-face
	{
		font-family: Monda;
		src: url('../../inc/font/Monda.ttf');	  
	}
  
	.img_services{
		display: block;
		margin-left: auto;
		margin-right: auto; 
	}
	
	.txt_services{
		text-align:center;
		margin-top:15px;
	}

	.copy{
		color:@grayLight;
		padding-left:20px;
	}

	.cloudwalk_text{
		position: absolute;
		padding: 10px 15px 0px;
		margin-top: 10px;
		width:18%;
		margin-left: 10px;
	}

	.cloudwalk_logo{	
		float:right;
		padding: 10px 75px 0px;
		margin-top: 10px;
		width:100px;
		height:100px;
	}
	.page1{
		height:100%;
	}

	.page_start{
		height:700px;
		max-height:700px;
	}
	.page{
		height:700px;
		max-height:700px;
		padding-top: 25px;
	}

	.services_icon{
		display:block; margin-left:auto;margin-right:auto;
		margin-top: 40px;
	}
	
	.page2_content{
		font-family: Monda, Arial, sans-serif;
		height:50%;
		font-size:20pt;
		margin-top:30px;
		margin-bottom:30px;
		text-align:center;
	}
	
	.page_header{
		font-size:30pt;
		margin:20px;
		text-align:center;
	}
	
		.contact_us{
						text-align:center;
						diplay:block;
						margin-left:auto;
						margin-right:auto;
					}
					
					.contact_us2{
						margin-top:40px;
						text-align:center;
						diplay:block;
						margin-left:auto;
						margin-right:auto;
					
					}
					form{
						diplay:block;
						margin-left:auto;
						margin-right:auto;
					}
					
					.email_us{
						margin-top:20px;
					}

	.opt_right{
		

		text-align:right;
		margin-top:5px;
		margin-right:25px;
		width:80px;
	}
	
	.cwd_logo{
		margin-left: 50px;
		margin-right: 50px;
	
	}
		
	@media (max-width: 1348px) {
	  	
		.opt_right{
			margin-left:10px;
			margin-right:15px;
		}
	}
	
	
	@media (max-width: 1325px) {
	  	

		.opt_right{
			margin-left:10px;
			margin-right:10px;
		}
	}
	
	@media (max-width: 1315px) {
	  	

		.opt_right{
			margin-left:10px;
			margin-right:25px;
		}
	}
	
	@media (max-width: 1300px) {
	  	

		.opt_right{
			margin-left:0px;
			margin-right:10px;
		}
	}
	
	@media (max-width: 1250px) {
		.cwd_logo {
			margin-left: 70px;
			margin-right: 60px;
		}

		.opt_right{
			margin-left:0px;
			margin-right:10px;
		}
	}
	

	
	@media (max-width: 1200px) {	
	
		.opt_right{
		width:65px;
			margin-left:0px;
			margin-right:5px;
			font-size:12px;
		}
		.cwd_logo {
			margin-left: 40px;
			margin-right: 36px;
		}	
		
		.cloudwalk_logo{
			padding: 0px 60px 0px 0px;
		}
		
		.cloudwalk_text{
			padding: 10px 40px 0px;
		}
		
	}
	
	@media (max-width: 979px) {
		.cwd_logo{
			display:none;
		}
	}
	

	
	
	
		 /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
	  font-family: 'Casper',Arial;
    }


    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 25px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
    }

    .carousel .item {
      
    }
    .carousel img {
      min-width: 100%;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }



    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }

    }
		
		
    // Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;
@orange:				#ee7624;

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Gradients
#gradient {
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
  }
}

// Pills for indicating active image
// ---------------------------------

.carousel-pills {
  position: absolute;
  bottom: 10px;
  left:  46.98%;
  display: block;
  text-align: right;
}

.carousel-pills span {
  display: inline-block;
  margin: 0px 5px;
  width: 10px;
  height: 10px;
  .border-radius(15px);
  background: @white;
  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  .box-shadow(@shadow);
  cursor: pointer;
  border: 1px solid #ee7624;

  &.active-pill {
	background: #ee7624;
    //#gradient > .vertical(@white, @orange);
  }

  &:hover {
    background: @orange;
  }
}

#myCarousel {
    width: 100%;
}

.navbar-fixed-bottom { 
	background-color:#fbfbfb;
	padding:5px;
}

  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
/* Add LESS support to the browser */
(function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })();
    
$('#myCarousel').carousel();
});//]]>  


</script>

   <script type='text/javascript'>
	  $(document).ready(function() {
	   
		$('a.home').click(function(){
			$('html, body').animate({
				scrollTop:0
			}, 1500, function() {
				//parallaxScroll(); // Callback is required for iOS
			});
    	return false;
		});
		
		$('a.about').click(function(){
			$('html, body').animate({
				scrollTop:$('#about').offset().top
			}, 1500, function() {
				//parallaxScroll(); // Callback is required for iOS
			});
    	return false;
		});
		
		$('a.services').click(function(){
			$('html, body').animate({
				scrollTop:$('#services').offset().top
			}, 1500, function() {
				//parallaxScroll(); // Callback is required for iOS
			});
    	return false;
		});
		
		$('a.products').click(function(){
			$('html, body').animate({
				scrollTop:$('#products').offset().top
			}, 1500, function() {
				//parallaxScroll(); // Callback is required for iOS
			});
    	return false;
		});
		
		$('a.team').click(function(){
			$('html, body').animate({
				scrollTop:$('#team').offset().top
			}, 1500, function() {
				//parallaxScroll(); // Callback is required for iOS
			});
    	return false;
		});
		
		$('a.contact').click(function(){
			$('html, body').animate({
				scrollTop:$('#contact').offset().top
			}, 1500, function() {
				//parallaxScroll(); // Callback is required for iOS
			});
    	return false;
		});
	
	});
	
	  </script>

</head>
<body style="background-image:url('../../images/bg_tile.jpg');">
		
		<!--Navigation-->
		
		<div class="navbar navbar-fixed-top">
				
				<div class="navbar-inner">
					<div class="containter">
						
						 <a href="" class=""><img class="cloudwalk_text" src="../../images/cloudwalk.png" alt=""/></a>
						<ul class="nav">
							
							<li class="opt_first">
								<a class="home opt_right" href="#home">HOME</a>
							</li>
							<li class="">
								<a class="opt_right about" href="#about">ABOUT US</a>
							</li>
							<li class="">
								<a class="opt_right services" href="#services">SERVICES</a>
							</li>
							<li class="">
								<a class="opt_right products" href="#products">PRODUCTS</a>
							</li>
							<li class="">
								<a class="opt_right team" href="#team">TEAM</a>
							</li>
							<li class="">
								<a class="opt_right contact" href="#contact">CONTACT</a>
							</li>
							<li class="">
							
							</li>
						</ul>
					
				
				<img class="cloudwalk_logo" src="../../images/new_logo.png" alt="" />
				</div>
				
			</div>
			
		</div>
		
		<!--CONTENT-->
		
	<div class="container">
		<!--PAGE 1-->
		<section id="home">
		<div class="page_start">
			<div id="myCarousel" class="carousel slide">
			  <!-- Carousel items -->
				<div class="carousel-inner">
					<div class="active item">
						<img src="../../images/slider1.jpg"></div>
					<div class="item"><img src="../../images/slider1.jpg"></div>
					<div class="item"><img src="../../images/slider1.jpg"></div>
					<div class="item"><img src="../../images/slider1.jpg"></div>
				</div>
					<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
					<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
			</div>
		
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span2 offset2"><img class="img_services" src="../../images/digital_campaign.png"><div class="txt_services">DIGITAL CAMPAIGN</div></div>
					<div class="span2"><img class="img_services" src="../../images/branding_strategy.png"><div class="txt_services">BRANDING STRATEGY</div></div>
					<div class="span2"><img class="img_services" src="../../images/software_development.png"><div class="txt_services">SOFTWARE DEVELOPMENT</div></div>
					<div class="span2"><img class="img_services" src="../../images/web_development.png"><div class="txt_services">WEB DEVELOPMENT</div></div>
				</div>
			</div>		
		</div>
		</section>

		
		
		<div class="" style="height:300px"></div>
		
		<!--PAGE 2-->
	
		<div class="page" id="about">
			<hr>
			<div class="page_header"><small>We are</small><sub> CLOUDWALK DIGITAL</sub></div>
			<hr>
			
			<img style="width:100%; height:40%" src="../../images/slider1.jpg">
			<div class="page2_content">
				<p>Founded in 2012, Cloudwalk arises as the newest digital</p>
				<p>agency that creates web, software and mobile apps that</p>
				<p>are simple, easy to use and lightweight</p><br/>
				
				<p>Cloudwalk aims to create digital solutions that can make</p>
				<p>things easier, more fun and more relevant to users</p><br/>
				
				<p>If you like what we do, and think we could work together.</p>
				<p>then get in touch or request a quote</p>
				
			</div>
		</div>
		
		<div class="" style="height:300px"></div>
		
		<!--PAGE 3-->
		<div class="page" id="services">
		
			<hr>
			<div class="page_header"><small>What </small><sub>we <big>CAN</big> do</sub></div>
			<hr>
		
				
			<div class="row-fluid">
				
				<div class="span4"><img class="services_icon" src = "../../images/service_icon1.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon2.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon3.png" alt=""></div>
			</div>
		
			<div class="row-fluid">
				<div class="span4"><img class="services_icon" src = "../../images/service_icon4.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon5.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon6.png" alt=""></div>
			</div>
		
		</div>
		
		<div class="" style="height:300px"></div>
		
		<!--page 4-->
		<div class="page" id="products">
			<hr>
				
					<div class="row-fuild">
						<div class="span5" style="width:45%">
							<img align="left" src="../../images/pic2.jpg" style="float:right;clear:both">
							<img align="left" src="../../images/pic3.jpg" style="float:right;clear:both">
						</div>
						<div class="span5" style="margin-left: 0px;width:45%	">
							<img align="left" src="../../images/pic1.jpg" style="float:left;clear:both">
							<img align="left" src="../../images/pic4.jpg" style="float:left;clear:both">
						</div>
					
					</div>
				
			<hr>
			
		</div>
		
		<!--page 5-->
		<div class="page" id="team">	
			<hr>

			<div class="page_header">The<big>TEAM</big> <sup>that works</sup></sup></div>
			<hr>
		
			<div class="row-fluid">
				
				<div class="span4"><img class="services_icon" src = "../../images/service_icon1.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon2.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon3.png" alt=""></div>
			</div>
		
			<div class="row-fluid">
				<div class="span4"><img class="services_icon" src = "../../images/service_icon4.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon5.png" alt=""></div>
				<div class="span4"><img class="services_icon" src = "../../images/service_icon6.png" alt=""></div>
			</div>
		
		</div>
		
			<div class="" style="height:300px"></div>
			
		<!--page 6-->
		<div class="page" id="contact">
		
			<hr>
			<div class="page_header">Where to <sub><big>find</big></sub><sup>us</sup></sup></div>
			<hr>
		
			<div class="row-fluid">
			
				<div class="span3 contact_us" style="width:30%;">
					<img class="services_icon" src = "../../images/email.png" alt="">
					<a href="" class="btn btn-primary email_us">EMAIL US</a>
					<img class="services_icon" src = "../../images/ask_quote.png" alt="">
					<a href="" class="btn btn-primary email_us">ASK FOR A QUOTE</a>
				</div>
				<div class="span3 contact_us" style="width:30%;">
					<img class="services_icon" src = "../../images/map.jpg" alt="">
				</div>
				<div class="span3 contact_us2" style="width:30%;">
					<form>
					  <fieldset>
					
						<input type="text" placeholder="Name">
						<input type="text" placeholder="Email">
						<textarea placeholder="Message" rows="3"></textarea><br/>
						<button type="submit" class="btn btn-primary">Submit</button>
						
						
					  </fieldset>
					</form>
				</div>
			</div>
		
		
		
		</div>
		
				
			<div class="" style="height:100px"></div>
		
				
			<div class="" style="height:100px"></div>
			
		<!--footer-->
		<div class="navbar navbar-fixed-bottom">
			<div class="row-fluid">
				<div class="span9"><span class="copy">COPYRIGHT © 2012 CLOUDWALK DIGITAL ALL RIGHTS RESERVED</span></div>
				<div class="span1"></div>
				<div class="span2"><img src = "../../images/footer_links.png" alt=""></div>
			</div>
		</div>
	</div>
		
</body>


</html>

